<!--
 * @Author: yuanweijiang
 * @Date: 2024-01-04 10:08:05
 * @LastEditors: XHM
-->
<template>
	<el-dialog :title="title" width="300" v-model="visible" :close-on-click-modal="false" :destroy-on-close="true" draggable>
		<div>
			<h1 class="px-4 py-2 text-lg font-bold flex justify-between items-center mb-1" style="background: #ced6e7; color: #000">
				<span>角色名称</span>
				<i
					v-if="title === '查看权限'"
					class="iconfont icon-tianjia2 cursor-pointer"
					style="font-size: 20px; color: #3156a5"
					@click="handleAddRoles"
				></i>
				<span v-else>添加</span>
			</h1>
			<p v-for="item in checkList" :key="item.roleDesc" class="flex px-4 py-2 justify-between items-center mb-1" style="background: #eaeef4">
				<span>{{ title === '查看权限' ? filterName(item.roleId) : item.roleName }}</span>
				<i
					v-if="title === '查看权限'"
					class="iconfont icon-shanchu cursor-pointer"
					style="font-size: 20px; color: #3156a5"
					@click="delHandel(item.roleId)"
				></i>
				<el-checkbox v-else v-model="item.check" class="mr-4" />
			</p>
		</div>
		<div class="text-center mt-4" v-if="checkList.length >= 0">
			<el-button type="primary" @click="onSave()">保存</el-button>
		</div>
	</el-dialog>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { useMessage } from '/@/hooks/message';
import { useUserInfo } from '/@/stores/userInfo';
import { pageList, projectRoles, saveProject } from '/@/api/admin/role.ts';
const visible = ref(false);
const checkList = ref([]);
const roleAll = ref([]);
const wokeSpaceName = ref('');
// const wokeSpaceName = ref(null);
const title = ref('查看权限');
//获取所有角色列表
const init = async () => {
	const { data } = await pageList({ size: 1000,current:1 });
	roleAll.value = data.records;
};
init();
//获取初始状态用户的权限
const getInfo = async (name: string) => {
	const { data } = await projectRoles({ wokeSpaceName: name });
	checkList.value = data;
};
//通过id查角色名称
const filterName = (id: string) => {
	return roleAll.value.filter((item) => {
		return item.roleId == id;
	})[0].roleName;
};
//删除角色
const delHandel = (id: string) => {
	checkList.value = checkList.value.filter((item) => {
		return item.roleId !== id;
	});
	checkList.value.forEach((item) => {
		item.check = true;
	});
};
//保存
const onSave = async () => {
	let saveList;
	if (checkList.value.length === 0) {
		saveList = [{ wokeSpaceName: wokeSpaceName.value, roleId: null }];
	} else {
		saveList = checkList.value.filter((item) => item.check);
	}

	const { msg } = await saveProject(saveList);
	if (msg == 'ok') {
		useMessage().success('保存成功');
		useUserInfo().setUserInfos();
		visible.value = false;
	}
};
//添加角色权限
const handleAddRoles = () => {
	title.value = '添加角色';
	roleAll.value.forEach((item) => {
		item.wokeSpaceName = wokeSpaceName.value;
		checkList.value.forEach((res) => {
			if (item.roleId === res.roleId) {
				item.check = true;
			}
		});
	});
	checkList.value = roleAll.value;
};
function openDialog() {
	visible.value = true;
}
//监听
watch(visible, () => {
	title.value = '查看权限';
});
defineExpose({
	openDialog,
	wokeSpaceName,
	getInfo,
});
</script>
<style scoped lang="scss">
.el-checkbox:last-of-type {
	margin-right: 10px;
}
</style>
